<template>
  <div class="confirmation_container">
    <!-- 填报确认 -->
    <!-- {{ fillData }} -->
    <div>
      <div style="font-size: 20px; font-weight: 600; color: #000; text-align: left">
        <strong>填报信息:</strong>
      </div>
      <div class="base_info">
        <p>
          <a-icon :style="{ color: 'rgba(82,192,26,1)', marginRight: '12px' }" type="check" />
          <span class="name">企 业：</span>
          <span>{{ basicInformation.orgId }}</span>
        </p>
        <p>
          <a-icon :style="{ color: 'rgba(82,192,26,1)', marginRight: '12px' }" type="check" />
          <span class="name">核算标准：</span>
          <span>{{ basicInformation.standardName }}</span>
        </p>
        <p>
          <a-icon :style="{ color: 'rgba(82,192,26,1)', marginRight: '12px' }" type="check" />
          <span class="name">核算行业：</span>
          <span>{{ basicInformation.industryName }}</span>
        </p>
        <p>
          <a-icon :style="{ color: 'rgba(82,192,26,1)', marginRight: '12px' }" type="check" />
          <span class="name">核算周期：</span>
          <span>
            {{ basicInformation.startTime }}
            -
            {{ basicInformation.endTime }}
          </span>
        </p>
      </div>

      <div style="font-size: 20px; font-weight: 600; color: #000; text-align: left">核算数据:</div>
      <div class="confirmation_list">
        <div class="spin" v-show="showSpin">
          <a-spin />
          <div class="text">核算中</div>
        </div>

        <transition-group name="list" class="list-item">
          <!-- fillDataComputed -->
          <div
            v-for="(item, index) in items"
            :key="index"
            :class="[item.type == 'title' ? 'tit_text' : 'val_text']"
          >
            <div v-if="item.type == 'title'" style="text-align: left">
              {{ item.name }}
              <!-- 标题 -->
            </div>
            <div v-if="item.type != 'title' && item.value != ''" class="val_text_con">
              <div class="name">
                <a-icon style="color: rgba(82, 192, 26, 1); marginRight: '12px'" type="check" />
                <span style="margin-left: 12px">{{ item.name }}</span>
              </div>
              <span class="val">{{ item.value }}</span>
            </div>
          </div>
        </transition-group>
      </div>
    </div>
    <div class="btn_box">
      <div class="PreviewBtn" @click="step(stepsCurrent - 1)">
        <div class="text">修改数据</div>
      </div>
      <div class="next" @click="saveFill(2, stepsCurrent + 1)">排放核算</div>
    </div>
  </div>
</template>

<script>
import { accountingFill } from "@/api/api";
import { Mixin } from "@/mixins/mixin.js";
export default {
  mixins: [Mixin],
  mounted() {
    this.fillDataArr = this.getFillData();
    this.fillDataidx = 0;
    this.fillDataidxLen = this.fillDataArr.length;
    this.timer = setInterval(() => {
      if (this.fillDataidx >= this.fillDataidxLen) {
        clearInterval(this.timer);
        this.timer = null; //清空内存
      } else {
        this.add();
      }
    }, 300);
  },

  methods: {
    add() {
      this.items.splice(
        this.items.length,
        0,
        this.fillDataArr[this.fillDataidx]
      );
      this.fillDataidx++;
    },
    getFillData() {
      var data = [];
      this.fillData.forEach((item, index) => {
        // //   console.log(item);
        if (item.data.length > 0) {
          data.push({ name: item.boundaryName, type: "title" });
          for (var i = 0; i < item.data.length; i++) {
            // //   console.log(item.data[i]);
            if (item.data[i].defaultValue) {
              // //   console.log(item.data[i].defaultValue);
              this.flag = this.flag + 1;
              data.push({
                name: item.data[i].itemName,
                type: "fill",
                value: item.data[i].defaultValue
              });
            }
          }
        }
      });
      return data;
    },

    step(step) {
      this.setStepsCurrent(step);
    },
    /**
     * @description:
     * @param {*} fillingStatus 填报状态
     * @param {*} step 步数
     * @return {*}
     */
    saveFill(fillingStatus, step) {
      //   console.log(this.fillData);

      var DataObj = [];
      this.fillData.forEach((item, index) => {
        var boundaryArr = []; //临时存储用户同一边界的每一项数据
        if (item.data.length > 0) {
          //   console.log(item);
          var obj = {}; //创建一个新对象
          // obj["renderData"] = item.data; //对象存储渲染数据
          for (var i = 0; i < item.data.length; i++) {
            //循环data里面的数据 用户填充了几项
            obj.boundaryId = item.data[i].boundaryId; //每一项的边界ID
            obj.parentId = item.data[i].parentId; //每一项的父级ID,没有为空
            obj.level = item.data[i].level; //当前层级
            obj.hasLeaf = item.data[i].hasLeaf; //是否有子项
            var userDataObj = item.data[i].dataList; //用户渲染数据的每一项
            // var ifBoundaryId =  item.data[i].dataList
            // //   console.log(obj,item.data,item.data[i],userDataObj, "用户数据");
            var boundaryItem = {};
            for (var k = 0; k < userDataObj.length; k++) {
              //遍历用户的每一项
              //核算项名称
              // //   console.log(userDataObj[k]["parentId"]);
              if (userDataObj[k]["parentId"]) {
                //每一层的父级IDparentId 置换上一层的parentId
                boundaryItem["parentId"] = userDataObj[k]["parentId"];
              }
              if (userDataObj[k]["level"]) {
                //每一层的level 置换上一层的level
                boundaryItem["level"] = userDataObj[k]["level"];
              }
              if (userDataObj[k]["boundaryId"]) {
                //每一层的boundaryId 置换上一层的boundaryId
                boundaryItem["boundaryId"] = userDataObj[k]["boundaryId"];
              }
              if (userDataObj[k]["itemName"]) {
                boundaryItem["item_name"] = item.data[i]["itemName"];
              }
              // 核算项的id
              if (item.data[i]["typeId"]) {
                boundaryItem["id"] = item.data[i]["typeId"];
              }
              // 核算项的其他值
              if (userDataObj[k]["defaultValue"]) {
                boundaryItem[userDataObj[k]["fieldCode"]] =
                  userDataObj[k]["defaultValue"];
              }
              //   console.log(boundaryItem, k);
            }
            // 如果不存在boundaryId  level  parentId
            if (!boundaryItem.hasOwnProperty("level")) {
              // boundaryItem["boundaryId"] = obj.boundaryId;
              boundaryItem["level"] = obj.level;
              boundaryItem["parentId"] = obj.parentId;
            }
            boundaryArr.push(boundaryItem);
          }
          obj["boundaryItem"] = boundaryArr;
          DataObj.push(obj);
        }
      });
      //   console.log(DataObj);
      DataObj.forEach((item, index) => {
        // //   console.log(DataObj);
        var boundaryItemArr = item.boundaryItem; //给对象赋值
        var minBoundaryItemArr = []; //最小边界对象
        var boundaryIdArr = [];
        for (var i = 0; i < boundaryItemArr.length; i++) {
          var obj = {};
          if (item.hasLeaf > 0) {
            //如果存在层级
            if (boundaryIdArr.indexOf(boundaryItemArr[i]["boundaryId"]) == -1) {
              boundaryIdArr.push(boundaryItemArr[i]["boundaryId"]);
              //如果不存在
              var minBoundaryObj = {};
              obj = { ...boundaryItemArr[i] };
              //   console.log(obj, boundaryItemArr);
              minBoundaryObj["minBoundaryItem"] = [];
              minBoundaryObj["minBoundaryItem"].push(obj);
              minBoundaryObj["level"] = boundaryItemArr[i]["level"];
              minBoundaryObj["minBoundaryId"] =
                boundaryItemArr[i]["boundaryId"];
              minBoundaryObj["parentId"] = boundaryItemArr[i]["parentId"];
              minBoundaryItemArr.push(minBoundaryObj);
              // minBoundaryObj["minBoundaryItem"] = minBoundaryItemArr;
              //   console.log(minBoundaryObj);
            } else {
              var idx = boundaryIdArr.indexOf(boundaryItemArr[i]["boundaryId"]);
              minBoundaryItemArr[idx]["minBoundaryItem"].push({
                ...boundaryItemArr[i]
              });
            }
          } else {
            if (boundaryIdArr.indexOf(item.boundaryId) == -1) {
              boundaryIdArr.push(item.boundaryId);
              //   console.log("不存在");
              var minBoundaryObj = {};
              var obj;
              minBoundaryObj["level"] = item["level"];
              minBoundaryObj["hasLeaf"] = item["hasLeaf"];
              minBoundaryObj["minBoundaryId"] = item["boundaryId"];
              minBoundaryObj["parentId"] = item["parentId"];
              obj = { ...boundaryItemArr[i] };
              minBoundaryObj["minBoundaryItem"] = [];
              minBoundaryObj["minBoundaryItem"].push(obj);
              //   console.log(minBoundaryObj);
              minBoundaryItemArr.push(minBoundaryObj);
            } else {
              //   console.log("存在");
              var idx = boundaryIdArr.indexOf(item.boundaryId);
              minBoundaryItemArr[idx]["minBoundaryItem"].push({
                ...boundaryItemArr[i]
              });
            }
          }
        }
        item["boundaryItem"] = minBoundaryItemArr;
      });
      //   console.log(DataObj);
      let Data = {
        cycleId: this.cycleId, //填报周期编号
        fillingStatus: fillingStatus, //保存状态
        boundaryForm: JSON.stringify(DataObj)
      };
      this.showSpin = true;

      if (this.flag != 0) {
        accountingFill(Data).then(res => {
          this.setResult(res);
          new Promise(resolve => {
            setTimeout(() => {
              resolve({ loop: false });
            }, 800);
          }).then(() => {
            this.showSpin = false;
            this.setStepsCurrent(step);
          });
        });
      } else {
        this.showSpin = false;
        this.$message.warning("请添加核算项");
      }
    }
  },
  data() {
    return {
      timer: null,
      fillDataArr: [],
      fillDataidx: 0,
      fillDataidxLen: null,
      items: [],
      flag: 0,
      showSpin: false
    };
  },
  beforeDestroy() {
    //或者destroyed钩子函数中执行清除
    clearInterval(this.timer);
    this.timer = null; //清空内存
  }
};
</script>

<style lang="scss">
@media screen and (min-width: 1200px) {
  .confirmation_container {
    background: #fff;
    margin: auto;
    width: 100%;
    border-radius: 10px;
    padding: 16px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .base_info {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin-bottom: 20px;
      p {
        margin-right: 40px;
        margin-top: 12px;
        margin-bottom: 0px;
        font-size: 16px;
        font-weight: 600;
        color: #333;
      }
    }
    .confirmation_list {
      padding: 0 0 40px 0;
      position: relative;
      .spin {
        background: rgba(204, 204, 204, 0.4);
        padding: 15px 30px;
        border-radius: 5px;
        z-index: 999;

        position: absolute;
        top: 50%;
        margin-left: -70px;
        margin-top: -50px;
        left: 50%;
        display: flex;
        align-items: center;
        box-shadow: 2px 2px 5px rgb(185, 185, 185);

        .text {
          margin-left: 20px;
          font-weight: 600;
          font-size: 18px;
        }
      }
      // width: 100%;
      .list-item {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        .tit_text {
          width: 100%;
          font-weight: 600;
          color: #000;
          height: 30px;
          line-height: 30px;
          margin: 12px 0 6px 0;
          font-size: 16px;
        }
        .val_text {
          width: 33%;

          .val_text_con {
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 34px;
            line-height: 34px;
            justify-content: space-between;
            .name {
              font-size: 16px;
              font-weight: 500;
              color: #333;
            }
            .val {
              font-size: 16px;
              padding-right: 50px;
              font-weight: 600;
              color: #50baf3;
            }
          }
        }
      }
    }

    .list-enter-active,
    .list-leave-active {
      transition: all 1s;
    }
    .list-enter,
    .list-leave-to {
      opacity: 0;
      transform: translateY(30px);
    }

    .btn_box {
      border-top: 1px solid rgb(236, 236, 236);
      display: flex;
      flex-direction: row;
      justify-content: center;
      > div {
        margin: 10px 5px;
        width: 50%;
      }
      .PreviewBtn {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 3px;
        height: 48px;
        text-decoration: none;

        cursor: pointer;
        outline: none;
        min-width: 140px;
        padding: 0 16px;

        border: 1px solid #50baf3;
        background: #fff;
        color: #50baf3;
        transition: color 0.5s;
        .text {
          font-size: 16px;
          font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
            BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
            Droid Sans, Helvetica Neue, sans-serif;
          font-weight: 600;
          line-height: 1;
          z-index: 4;
        }
        &:hover {
          color: #fff;
          &::after {
            height: 100%;
          }
        }
        &::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 0;
          bottom: 0;
          left: 0;
          background: #50baf3;
          transition: height 0.5s;
          z-index: 0;
        }
      }

      .next {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 3px;
        height: 48px;
        text-decoration: none;
        font-size: 16px;
        cursor: pointer;
        outline: none;
        min-width: 140px;
        padding: 0 16px;
        font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
          BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans, Droid Sans,
          Helvetica Neue, sans-serif;
        font-weight: 600;
        line-height: 1;

        background-image: linear-gradient(
          270deg,
          rgba(80, 186, 243, 0.35),
          #50baf3,
          #50baf3,
          rgba(80, 186, 243, 0.35)
        );
        background-size: 200% 100%;
        color: #fff;
        cursor: pointer;
        transition: background-position 0.8s;
        &:hover {
          background-position: 100% 50%;
        }
      }
    }
  }
}
@media screen and (min-width: 993px) and (max-width: 1199px) {
  .confirmation_container {
    background: #fff;
    margin: auto;
    width: 100%;
    border-radius: 10px;
    padding: 16px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .base_info {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin-bottom: 20px;
      p {
        margin-right: 40px;
        margin-top: 12px;
        margin-bottom: 0px;
        font-size: 16px;
        font-weight: 600;
        color: #333;
      }
    }
    .confirmation_list {
      padding: 0 0 40px 0;
      position: relative;
      .spin {
        background: rgba(204, 204, 204, 0.4);
        padding: 15px 30px;
        border-radius: 5px;
        z-index: 999;

        position: absolute;
        top: 50%;
        margin-left: -70px;
        margin-top: -50px;
        left: 50%;
        display: flex;
        align-items: center;
        box-shadow: 2px 2px 5px rgb(185, 185, 185);

        .text {
          margin-left: 20px;
          font-weight: 600;
          font-size: 18px;
        }
      }
      // width: 100%;
      .list-item {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        .tit_text {
          width: 100%;
          font-weight: 600;
          color: #000;
          height: 30px;
          line-height: 30px;
          margin: 12px 0 6px 0;
          font-size: 16px;
        }
        .val_text {
          width: 33%;

          .val_text_con {
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 34px;
            line-height: 34px;
            justify-content: space-between;
            .name {
              font-size: 16px;
              font-weight: 500;
              color: #333;
            }
            .val {
              font-size: 16px;
              padding-right: 50px;
              font-weight: 600;
              color: #50baf3;
            }
          }
        }
      }
    }

    .list-enter-active,
    .list-leave-active {
      transition: all 1s;
    }
    .list-enter,
    .list-leave-to {
      opacity: 0;
      transform: translateY(30px);
    }

    .btn_box {
      border-top: 1px solid rgb(236, 236, 236);
      display: flex;
      flex-direction: row;
      justify-content: center;
      > div {
        margin: 10px 5px;
        width: 50%;
      }
      .PreviewBtn {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 3px;
        height: 48px;
        text-decoration: none;

        cursor: pointer;
        outline: none;
        min-width: 140px;
        padding: 0 16px;

        border: 1px solid #50baf3;
        background: #fff;
        color: #50baf3;
        transition: color 0.5s;
        .text {
          font-size: 16px;
          font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
            BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
            Droid Sans, Helvetica Neue, sans-serif;
          font-weight: 600;
          line-height: 1;
          z-index: 4;
        }
        &:hover {
          color: #fff;
          &::after {
            height: 100%;
          }
        }
        &::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 0;
          bottom: 0;
          left: 0;
          background: #50baf3;
          transition: height 0.5s;
          z-index: 0;
        }
      }

      .next {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 3px;
        height: 48px;
        text-decoration: none;
        font-size: 16px;
        cursor: pointer;
        outline: none;
        min-width: 140px;
        padding: 0 16px;
        font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
          BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans, Droid Sans,
          Helvetica Neue, sans-serif;
        font-weight: 600;
        line-height: 1;

        background-image: linear-gradient(
          270deg,
          rgba(80, 186, 243, 0.35),
          #50baf3,
          #50baf3,
          rgba(80, 186, 243, 0.35)
        );
        background-size: 200% 100%;
        color: #fff;
        cursor: pointer;
        transition: background-position 0.8s;
        &:hover {
          background-position: 100% 50%;
        }
      }
    }
  }
}
@media screen and (min-width: 768px) and (max-width: 992px) {
  .confirmation_container {
    background: #fff;
    margin: auto;
    width: 100%;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .base_info {
      width: 100%;
      p {
        // margin-right: 40px;
        font-size: 16px;
        // height: 50px;
        display: flex;
        flex-direction: row;
        // flex-wrap: wrap;
        text-align: left;
        // line-height: 50px;
        font-weight: 600;
        margin-bottom: 6px;
        color: #333;
        .name {
          min-width: 90px;
        }
      }
    }
    .confirmation_list {
      padding: 0 0 40px 0;
      position: relative;
      .spin {
        background: rgba(204, 204, 204, 0.4);
        padding: 15px 30px;
        border-radius: 5px;
        z-index: 999;

        position: absolute;
        top: 50%;
        margin-left: -70px;
        margin-top: -50px;
        left: 50%;
        display: flex;
        align-items: center;
        box-shadow: 2px 2px 5px rgb(185, 185, 185);

        .text {
          margin-left: 20px;
          font-weight: 600;
          font-size: 18px;
        }
      }
      // width: 100%;
      .list-item {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        .tit_text {
          width: 100%;
          font-weight: 600;
          color: #000;
          height: 30px;
          line-height: 30px;
          margin: 12px 0 6px 0;
          font-size: 16px;
        }
        .val_text {
          width: 50%;

          .val_text_con {
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 34px;
            margin-right: 20px;
            // line-height: 34px;
            justify-content: space-between;
            .name {
              font-size: 16px;
              font-weight: 500;
              color: #333;
            }
            .val {
              font-size: 16px;
              // padding-right: 50px;

              font-weight: 600;
              color: #50baf3;
            }
          }
        }
      }
    }

    .list-enter-active,
    .list-leave-active {
      transition: all 1s;
    }
    .list-enter,
    .list-leave-to {
      opacity: 0;
      transform: translateY(30px);
    }

    .btn_box {
      border-top: 1px solid rgb(236, 236, 236);
      display: flex;
      flex-direction: row;
      justify-content: center;
      > div {
        margin: 10px 5px;
        width: 50%;
      }
      .PreviewBtn {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 3px;
        height: 48px;
        text-decoration: none;

        cursor: pointer;
        outline: none;
        min-width: 140px;
        padding: 0 16px;

        border: 1px solid #50baf3;
        background: #fff;
        color: #50baf3;
        transition: color 0.5s;
        .text {
          font-size: 16px;
          font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
            BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
            Droid Sans, Helvetica Neue, sans-serif;
          font-weight: 600;
          line-height: 1;
          z-index: 4;
        }
        &:hover {
          color: #fff;
          &::after {
            height: 100%;
          }
        }
        &::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 0;
          bottom: 0;
          left: 0;
          background: #50baf3;
          transition: height 0.5s;
          z-index: 0;
        }
      }

      .next {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 3px;
        height: 48px;
        text-decoration: none;
        font-size: 16px;
        cursor: pointer;
        outline: none;
        min-width: 140px;
        padding: 0 16px;
        font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
          BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans, Droid Sans,
          Helvetica Neue, sans-serif;
        font-weight: 600;
        line-height: 1;

        background-image: linear-gradient(
          270deg,
          rgba(80, 186, 243, 0.35),
          #50baf3,
          #50baf3,
          rgba(80, 186, 243, 0.35)
        );
        background-size: 200% 100%;
        color: #fff;
        cursor: pointer;
        transition: background-position 0.8s;
        &:hover {
          background-position: 100% 50%;
        }
      }
    }
  }
}
@media screen and (max-width: 767px) {
  .confirmation_container {
    background: #fff;
    margin: auto;
    width: 100%;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .base_info {
      width: 100%;
      p {
        // margin-right: 40px;
        font-size: 16px;
        // height: 50px;
        display: flex;
        flex-direction: row;
        // flex-wrap: wrap;
        text-align: left;
        // line-height: 50px;
        font-weight: 600;
        margin-bottom: 6px;
        color: #333;
        .name {
          min-width: 90px;
        }
      }
    }
    .confirmation_list {
      padding: 0 0 40px 0;
      position: relative;
      .spin {
        background: rgba(204, 204, 204, 0.4);
        padding: 15px 30px;
        border-radius: 5px;
        z-index: 999;

        position: absolute;
        top: 50%;
        margin-left: -70px;
        margin-top: -50px;
        left: 50%;
        display: flex;
        align-items: center;
        box-shadow: 2px 2px 5px rgb(185, 185, 185);

        .text {
          margin-left: 20px;
          font-weight: 600;
          font-size: 18px;
        }
      }
      // width: 100%;
      .list-item {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        .tit_text {
          width: 100%;
          font-weight: 600;
          color: #000;
          height: 30px;
          line-height: 30px;
          margin: 12px 0 6px 0;
          font-size: 16px;
        }
        .val_text {
          width: 100%;

          .val_text_con {
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 34px;
            // line-height: 34px;
            justify-content: space-between;
            .name {
              font-size: 16px;
              font-weight: 500;
              color: #333;
            }
            .val {
              font-size: 16px;
              // padding-right: 50px;

              font-weight: 600;
              color: #50baf3;
            }
          }
        }
      }
    }

    .list-enter-active,
    .list-leave-active {
      transition: all 1s;
    }
    .list-enter,
    .list-leave-to {
      opacity: 0;
      transform: translateY(30px);
    }

    .btn_box {
      border-top: 1px solid rgb(236, 236, 236);
      display: flex;
      flex-direction: row;
      justify-content: center;
      > div {
        margin: 10px 5px;
        width: 50%;
      }
      .PreviewBtn {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 3px;
        height: 48px;
        text-decoration: none;

        cursor: pointer;
        outline: none;
        min-width: 140px;
        padding: 0 16px;

        border: 1px solid #50baf3;
        background: #fff;
        color: #50baf3;
        transition: color 0.5s;
        .text {
          font-size: 16px;
          font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
            BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
            Droid Sans, Helvetica Neue, sans-serif;
          font-weight: 600;
          line-height: 1;
          z-index: 4;
        }
        &:hover {
          color: #fff;
          &::after {
            height: 100%;
          }
        }
        &::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 0;
          bottom: 0;
          left: 0;
          background: #50baf3;
          transition: height 0.5s;
          z-index: 0;
        }
      }

      .next {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 3px;
        height: 48px;
        text-decoration: none;
        font-size: 16px;
        cursor: pointer;
        outline: none;
        min-width: 140px;
        padding: 0 16px;
        font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
          BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans, Droid Sans,
          Helvetica Neue, sans-serif;
        font-weight: 600;
        line-height: 1;

        background-image: linear-gradient(
          270deg,
          rgba(80, 186, 243, 0.35),
          #50baf3,
          #50baf3,
          rgba(80, 186, 243, 0.35)
        );
        background-size: 200% 100%;
        color: #fff;
        cursor: pointer;
        transition: background-position 0.8s;
        &:hover {
          background-position: 100% 50%;
        }
      }
    }
  }
}
</style>